import React, { Component } from 'react'
import { Form, Row, Col, Input, Button, Table, Image } from 'antd'
import { Link } from 'react-router-dom'

import './index.less'

const SearchForm = () => {
  const [form] = Form.useForm()

  const getFields = () => {
    return (
      <>
        <Col>
          <Form.Item
            name={`price`}
            label={`price`}
            rules={[
              {
                required: true,
                message: 'Input something!',
              },
            ]}
          >
            <Input placeholder="placeholder" />
          </Form.Item>
        </Col>
        <Col>
          <Form.Item
            name={`price`}
            label={`price`}
            rules={[
              {
                required: true,
                message: 'Input something!',
              },
            ]}
          >
            <Input placeholder="placeholder" />
          </Form.Item>
        </Col>
        <Col>
          <Form.Item
            name={`price`}
            label={`price`}
            rules={[
              {
                required: true,
                message: 'Input something!',
              },
            ]}
          >
            <Input placeholder="placeholder" />
          </Form.Item>
        </Col>
        <Col style={{ textAlign: 'right' }}>
          <Button type="primary" htmlType="submit">
            Search
          </Button>
          <Button
            style={{ margin: '0 8px' }}
            onClick={() => {
              form.resetFields()
            }}
          >
            Clear
          </Button>
        </Col>
      </>
    )
  }

  const onFinish = (values) => {
    console.log('Received values of form: ', values)
  }

  return (
    <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form"
      onFinish={onFinish}
    >
      <Row style={{ width: '100%' }}>{getFields()}</Row>
    </Form>
  )
}
const dataSource = []
for (let i = 0; i < 46; i++) {
  dataSource.push({
    key: i,
    id: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
    picture:
      'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AARdJbM.img?h=534&w=799&m=6&q=60&o=f&l=f',
  })
}

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '图片',
    dataIndex: 'picture',
    key: 'picture',
    render: (text) => <Image width={100} src={text} alt="" />,
  },
  {
    title: '详情',
    dataIndex: 'id',
    key: 'id',
    render: (text) => (
      <span style={{ cursor: 'pointer', color: '#0D7F85' }}>
        <Link to={'details/1' + text}>详情</Link>
      </span>
    ),
  },
]

class List extends Component {
  state = {
    selectedRowKeys: [], // 选择中的商品
  }

  start = () => {
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
      })
    }, 1000)
  }

  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys)
    this.setState({ selectedRowKeys })
  }

  render() {
    const { selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    return (
      <div id="list">
        <SearchForm />
        <div className="search-result-list">
          <Table
            rowSelection={rowSelection}
            dataSource={dataSource}
            columns={columns}
          />
        </div>
      </div>
    )
  }
}

export default List
